import { useModel } from '@umijs/max';
import { Button } from 'antd';
import { useState } from 'react';
import MyButton from './MyButton';

// 定义 Product 类型
type Product = {
  title: string;
  id: number;
};

export default function App() {
  // 使用类型注解初始化状态
  const [products, setProducts] = useState<Product[]>([
    { title: 'Cabbage', id: 1 },
    { title: 'Garlic', id: 2 },
    { title: 'Apple', id: 3 },
  ]);

  function changeList(e: React.MouseEvent<HTMLButtonElement>) {
    e.preventDefault();
    e.stopPropagation();
    const newProducts = products.map((product) =>
      product.id === 1 ? { ...product, title: '垃圾' } : product,
    );
    setProducts(newProducts);
  }

  const listItems = products.map((product) => (
    <li key={product.id}>{product.title}</li>
  ));

  // 假设从 useModel 获取的是一个具有 name 和 setName 的对象
  const { name, setName } = useModel('global');

  const [count, setCount] = useState<number>(0);
  function handleClick() {
    setCount(count + 1);
  }

  const [number, setNumber] = useState(0);

  return (
    <>
      <h1>{name}</h1>
      <ul style={{ listStyle: 'none', padding: 0 }}>{listItems}</ul>
      <Button onClick={changeList}>改变List</Button>
      <Button onClick={() => setName('中华人民共和国')}>改变Name</Button>
      <hr />
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
      <hr />
      <h1>{number}</h1>
      <Button
        onClick={() => {
          setNumber(number + 5);
          setTimeout(() => {
            alert(number);
          }, 3000);
        }}
      >
        +5
      </Button>
    </>
  );
}
